<template>
    <div>
        <vue-table ref="table" :data="couponList" highlight-current-row :total="total" @action-change="actionChange" :is-loading="listLoading">
            <el-col :span="24"  style="padding-bottom: 0px;" slot="searchBar">
                <vue-form :config="searchConfig" @submit="filter">
                </vue-form>
            </el-col>
            <el-table-column
                    type="index"
                    width="55">
            </el-table-column>
            <el-table-column v-for="(col, index) in colList" :key="index"
                             :prop="col.prop"
                             :label="col.label"
                             :width="col.width"
                             :min-width="col.minWidth">
                <template slot-scope="{row, column, $index}">
                    <el-col>
                        <el-tag v-if="column.property === 'statusName'" type="success">{{row.statusName}}</el-tag>
                        <span v-else-if="column.property==='getCouponTime'">{{row.getCouponTime | date}}</span>
                        <span v-else-if="column.property==='useBeginDate'">{{row.useBeginDate | date(true)}} 至 {{row.useEndDate | date(true)}}</span>
                        <span v-else>{{row[column.property]}}</span>
                    </el-col>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="200">
                <template slot-scope="{row, column, $index}">
                    <el-col>
                        <el-button size="mini">修改</el-button>
                        <el-button size="mini" type="danger">删除</el-button>
                    </el-col>
                </template>
            </el-table-column>
        </vue-table>
    </div>
</template>

<script>

  import {searchConfig, colList} from './page-data';
  import * as api from '../../constants/api'
  import utils from '../../utils/utils';
  import ajax from '../../utils/ajax'

  export default {
    name: "tableExample",
    data() {
      return {
        searchConfig,
        colList,
        couponList: [],
        listLoading: false,
        total: 0,

        pageConfig:{
          pageNo: 1,
          pageSize: 10,
        },
        filterParams:{},
      }
    },
    computed: {},
    methods: {
      filter(filters) {
        this.filterParams = filters;
        if(this.pageConfig.pageNo===1){
          this.queryList();
          return;
        }
        this.$refs.table.resetPagination(1);
      },
      actionChange(params) {
        this.pageConfig =  {
          pageNo: params.pageNo || this.pageConfig.pageNo,
          pageSize: params.pageSize || this.pageConfig.pageSize,
        }

        this.queryList();
      },
      queryList(){
        // let queryKeys = Object.keys(this.filterParams)
        // if(queryKeys.length<=0 || queryKeys.reduce((a,b)=>{return a+this.filterParams[b]},"").length<=0){
        //   utils.oast('查询条件不能为空','error')
        //   return;
        // }
        this.listLoading = true;
        ajax.post(api.TABLE_LIST,{
          ...this.pageConfig,
          ...this.filterParams,
        }).then((res)=>{
          this.couponList = res.rows;
          this.total = res.total;
          this.listLoading = false
        }).catch(err=>{
          this.listLoading = false
        })
      }
    },
    mounted() {

    },
    created() {
        this.queryList();
    },
  }
</script>

<style scoped>

</style>
